<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-31 10:50:41
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:50:16
 * @FilePath: \nien-vue3-admin\src\views\BusinessConfiguration\sellPriceManagement\components\BasicData.vue
 * @Description: 基础数据
-->
<template>
  <el-form
    ref="formRef"
    :rules="rules" 
    :model="formData"
    label-position="top"
  >
    <el-row :span="76">
      <el-col :span="8">
        <el-form-item label="销售产品" prop="salesProductId">
          <el-select v-model="formData.salesProductId" filterable clearable>
            <el-option
              v-for="dict in dicts[DictDirection.销售产品]"
              :key="dict.id"
              :value="dict.id"
              :label="dict.salesProductName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="收费币种" prop="chargeCurrency">
          <el-select v-model="formData.chargeCurrency" filterable clearable>
            <el-option
              v-for="dict in dicts[DictDirection.币种]"
              :key="dict.id"
              :value="dict.dictValue"
              :label="dict.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="货物类型" prop="goodsType">
          <el-select v-model="formData.goodsType" filterable clearable>
            <el-option
              v-for="dict in dicts[DictDirection.货物类型]"
              :key="dict.id"
              :value="dict.dictValue + ''"
              :label="dict.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="付款方式" prop="paymentMethod">
          <el-select v-model="formData.paymentMethod" filterable clearable>
            <el-option
              v-for="dict in dicts[DictDirection.付款方式]"
              :key="dict.id"
              :value="dict.dictValue + ''"
              :label="dict.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="formData.remarks"
            rows="1"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive, defineProps, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { validateForm } from '@/utils'
import { sellingPriceAdd, sellingPriceEdit } from '@/api/BusinessConfig/sellPriceManagement'

const dicts = useDicts()
dicts.setDicts(DictDirection.货物类型)
dicts.setDicts(DictDirection.销售产品)
dicts.setDicts(DictDirection.币种)
dicts.setDicts(DictDirection.付款方式)

const props = defineProps({
  basicInfo: {
    type: Object,
    default: () => ({}),
  },
})

const formData = reactive({
  salesProductId: '',
  chargeCurrency: '',
  goodsType: '',
  paymentMethod: '',
  remarks: '',
})

watchEffect(() => {
  const {
    salesProductId,
    chargeCurrency,
    goodsType,
    paymentMethod,
    remarks,
    id,
  } = props.basicInfo

  Object.assign(formData, {
    salesProductId,
    chargeCurrency,
    goodsType,
    paymentMethod,
    id,
    remarks,
  })
})

const formRef = ref()

const rules = {
  salesProductId: [{ required: true, message: '请选择销售产品', trigger: ['change', 'blur'] }],
  chargeCurrency: [{ required: true, message: '请选择收费币种', trigger: ['change', 'blur'] }],
  goodsType: [{ required: true, message: '请选择货物类型', trigger: ['change', 'blur'] }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: ['change', 'blur'] }],
}

const save = (type) => new Promise((resolve, reject) => {
  validateForm(formRef.value, () => {
    const fn = type === '修改' ? sellingPriceEdit : sellingPriceAdd
    fn(formData).then(res => {
      if (res.code === 200) {
        ElMessage.success(`${ type }成功！`)
        resolve(true)
      } else {
        reject()
      }
    })
  })
})

defineExpose({
  save,
})
</script>